<template>
    <div class="warrper">
        <div class= "redPacket">
            <transition enter-active-class="animated zoomOutLeft" leave-active-class="animated zoomOutRight">
                 <div v-if="flag" @click = "animate" class="text"> 动画测试</div>
            </transition>
           
        </div>
        <div class="sel">
            <multiselect v-model="value" :options="options"></multiselect>
        </div>
        <Bottom :baseText = "baseText"></Bottom>
    </div>
</template>
<script>
import request from "@/utils/request";
import * as config from "./config";
// import wxsdk from "@/utils/wxsdk";
// import utils from "@/utils/utils";
// import Cookies from "js-cookie";
import {mapState, mapMutations} from "vuex";
import Bottom from "@/components/common/Bottom";
import Multiselect from 'vue-multiselect'
export default {
    data(){
      return{
          baseText: config.BASE_TEXT,
          reOpenid: this.$route.query.reOpenid ? this.$route.query.reOpenid : '',
          flag: false,
          value: null,
          options: ['测试1', '测试2', '测试3', '测试4']
      }
    },
    computed: {
        ...mapState(["info", "channel"])
    },
    components: {
      Bottom: Bottom,
      Multiselect
    },
    methods: {
        ...mapMutations({
            setInfo: "SET_INFO",
            setChannel: "SET_CHANNEL"
        }),
        animate(){
            const _this = this;
            _this.flag = false;
            _this.$nextTick(()=> {
                 _this.flag = true;
            })
        },
    },
    created() {
            this.setChannel(this.$route.query.channel ? this.$route.query.channel : 0);
            if (!this.info.mobile) {
                request
                    .get(this.global.API_URL, {
                        action: "/activity/relay/RelayAction/getActUserInfo",
                        requestParam: {
                            actcode: config.ACT_CODE,
                            referenceopenid: ""
                        }
                    })
                    .then(response => {
                        this.setInfo(response.obj);
                        if (this.info && this.info.nickname && this.info.nickname != '') {
                            this.global.SHARE_TITLE = this.info.nickname + "邀请你跟我一起读语音赢奖品，读出你的“国际范儿”";
                        }
                        this.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/jbact/index?channel=' + this.channel + '&reOpenid=' + this.openid;
                    });
            }
        this.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/jbact/index?channel=' + this.channel + '&reOpenid=' + this.openid;
    },

    mounted (){
         let _self = this;
         _self.flag = true;
         this.global.SHARE_CALLBACK_OK = function (type) {
                request
                    .get(_self.global.API_URL, {
                        action: "/activity/relay/RelayAction/share",
                        requestParam: {
                            actcode: config.ACT_CODE,
                            groupcode: config.ACT_CODE,
                            prizecode: 'prize_1',
                            channel: _self.channel,
                            referenceopenid: _self.reOpenid
                        }
                    })
                    .then(response => {

                    });
            };
            config.initShare();
    }
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css">

</style>


<style lang="stylus" scoped >
   .warrper{
      position absolute
      top: 0
      left: 0
      bottom: 0
      right: 0
      background #fedcbd
   }
  .redPacket{
     width 100%
     min-height 1.5rem
  }
  .hbText{
      text-align center
      width 100%
      height 1rem
      line-height 1rem
      color #333
  }
  .sel{
      width 80%
      margin 0 auto
  }

</style>

